﻿@using MudBlazor.Internal

@namespace MudBlazor
@inherits MudPicker<DateTime?>

@Render

@code{

    protected override RenderFragment PickerContent =>
    @<CascadingValue Value="@this" IsFixed="true">
        <MudPickerToolbar Class="mud-picker-datepicker-toolbar" DisableToolbar="@DisableToolbar" Orientation="@Orientation" Color="@Color">
            @if (!FixYear.HasValue)
            {
                <MudButton Variant="Variant.Text" Color="Color.Inherit" Class="mud-button-year" OnClick="OnYearClick">@GetFormattedYearString()</MudButton>
            }
            @* Is shown even with fix day, button click does not change to that day -> if it would this would need to be changed *@
            <MudButton Variant="Variant.Text" Color="Color.Inherit" Class="mud-button-date" OnClick="OnFormattedDateClick">@GetTitleDateString()</MudButton>
           
        </MudPickerToolbar>
        <MudPickerContent>
            <div class="mud-picker-calendar-content @($"mud-picker-calendar-content-{MaxMonthColumns ?? DisplayMonths}")">
                @{
                    int dayId = 0;
                    @if (_picker_month.HasValue && _picker_month.Value.Year == 1 && _picker_month.Value.Month == 1)
                    {
                        dayId = -1;
                    }
                }
                @for (int displayMonth = 0; displayMonth < DisplayMonths; ++displayMonth)
                {
                    int tempMonth = displayMonth; //without local variable month names are wrong

                    <div class="mud-picker-calendar-container">
                        @if (tempMonth == 0 && CurrentView == OpenTo.Year)
                        {
                            <div id="pickerYears" class="mud-picker-year-container">
                                @for (int i = GetMinYear(); i <= GetMaxYear(); i++)
                                {
                                    var year = i;
                                    <div class="mud-picker-year" id="@(_componentId + year)" @onclick="(() => OnYearClicked(year))" @onclick:stopPropagation="true">
                                        <MudText Typo="@GetYearTypo(year)" Class="@GetYearClasses(year)">@GetCalendarYear(year)</MudText>
                                    </div>
                                }
                            </div>
                        }
                        else if (tempMonth == 0 && CurrentView == OpenTo.Month)
                        {
                            var calendarYear = GetCalendarYear(PickerMonth?.Year ?? DateTime.Today.Year);
                            var prevLabel = $"Go to previous year {calendarYear - 1}";
                            var nextLabel = $"Go to next year {calendarYear + 1}";

                            <div class="mud-picker-calendar-header">
                                <div class="mud-picker-calendar-header-switch">
                                    @if (!FixYear.HasValue)
                                    {
                                        <MudIconButton aria-label="@prevLabel" Icon="@PreviousIcon" OnClick="OnPreviousYearClick" Class="mud-flip-x-rtl" />
                                        <button type="button" class="mud-picker-slide-transition mud-picker-calendar-header-transition" @onclick="OnYearClick" @onclick:stopPropagation="true">
                                            <MudText Typo="Typo.body1" Align="Align.Center">@calendarYear</MudText>
                                        </button>
                                        <MudIconButton aria-label="@nextLabel" Icon="@NextIcon" OnClick="OnNextYearClick" Class="mud-flip-x-rtl" /> }
                                    else{ <MudText Class="mud-picker-calendar-header-transition" Typo="Typo.body1" Align="Align.Center">@calendarYear</MudText>}
                                </div>
                            </div>
                            <div class="mud-picker-month-container">
                                @foreach (var month in GetAllMonths())
                                {
                                    <button type="button" aria-label="@GetMonthName(month)" class="mud-picker-month" @onclick="(() => OnMonthSelected(month))" @onclick:stopPropagation="true">
                                        <MudText Typo="@GetMonthTypo(month)" Class="@GetMonthClasses(month)">@GetAbbreviatedMonthName(month)</MudText>
                                    </button>
                                }
                            </div>
                        }
                        else if (CurrentView == OpenTo.Date || tempMonth > 0)
                        {
                            var prevLabel = $"Go to previous month {GetMonthName((tempMonth - 1) % 12)}";
                            var nextLabel = $"Go to next month {GetMonthName((tempMonth + 1) % 12)}";

                            <div class="@GetCalendarHeaderClasses(tempMonth)">
                                <div class="mud-picker-calendar-header-switch">
                                    @if (!FixMonth.HasValue)
                                    {
                                        <MudIconButton aria-label="@prevLabel" Class="mud-picker-nav-button-prev mud-flip-x-rtl" Icon="@PreviousIcon" OnClick="OnPreviousMonthClick" />
                                        <button type="button" class="mud-picker-slide-transition mud-picker-calendar-header-transition mud-button-month" @onclick="(() => OnMonthClicked(tempMonth))" @onclick:stopPropagation="true">
                                            <MudText Typo="Typo.body1" Align="Align.Center">@GetMonthName(tempMonth)</MudText>
                                        </button>
                                        <MudIconButton aria-label="@nextLabel" Class="mud-picker-nav-button-next mud-flip-x-rtl" Icon="@NextIcon" OnClick="OnNextMonthClick" /> }
                                    else { <MudText Class="mud-picker-calendar-header-transition" Typo="Typo.body1" Align="Align.Center">@GetMonthName(tempMonth)</MudText>}
                                </div>
                                <div class="mud-picker-calendar-header-day">
                                    @if (ShowWeekNumbers)
                                    {
                                        <div class="mud-picker-calendar-week">
                                            <MudText Typo="Typo.caption" Class="mud-picker-calendar-week-text"></MudText>
                                        </div>
                                    }
                                    @foreach (var dayname in GetAbbreviatedDayNames())
                                    {
                                        <MudText Typo="Typo.caption" Class="mud-day-label">@dayname</MudText>
                                    }
                                </div>
                            </div>
                            <div class="mud-picker-calendar-transition mud-picker-slide-transition">
                                <div class="mud-picker-calendar">
                                    @for (int week = 0; week < 6; week++)
                                    {
                                        int tempWeek = week;
                                        var firstMonthFirstYear = _picker_month.HasValue && _picker_month.Value.Year == 1 && _picker_month.Value.Month == 1;

                                        @if (ShowWeekNumbers)
                                        {
                                            <div class="mud-picker-calendar-week">
                                                <MudText class="mud-picker-calendar-week-text" Typo="Typo.caption">@GetWeekNumber(tempMonth, tempWeek)</MudText>
                                            </div>
                                        }
                                        @foreach (var day in GetWeek(tempMonth, tempWeek))
                                        {
                                            var tempId = ++dayId;

                                            @if (tempId != 0 || !firstMonthFirstYear)
                                            {
                                                var selectedDay = !firstMonthFirstYear ? day : day.AddDays(-1);
                                                <button @key="@(!firstMonthFirstYear ? selectedDay : tempId)" type="button" style="--day-id: @(!firstMonthFirstYear ? tempId: tempId + 1);"
                                                        class="mud-button-root mud-icon-button mud-ripple mud-ripple-icon mud-picker-calendar-day @(!firstMonthFirstYear || day.Day == _picker_month.Value.Day? GetDayClasses(tempMonth, day) : GetDayClasses(tempMonth, selectedDay))"
                                                        @onclick="(() => { var d = selectedDay; OnDayClicked(d); })"
                                                        @onclick:stopPropagation="true"
                                                        aria-label='@selectedDay.ToString("dddd, dd MMMM yyyy")'
                                                        onmouseover="this.closest('.mud-picker-calendar-content').style.setProperty('--selected-day', @(!firstMonthFirstYear ? tempId: tempId + 1));"
                                                        disabled="@((selectedDay < MinDate) || (selectedDay > MaxDate) || IsDateDisabledFunc(selectedDay))">
                                                    <p class="mud-typography mud-typography-body2 mud-inherit-text">@GetCalendarDayOfMonth(selectedDay)</p>
                                                </button>
                                            }
                                            else
                                            {
                                                <button @key="0" type="button" style="--day-id: 1;"
                                                        class="mud-button-root mud-icon-button mud-ripple mud-ripple-icon mud-picker-calendar-day mud-day"
                                                        aria-label='' disabled>
                                                    <p class="mud-typography mud-typography-body2 mud-inherit-text"></p>
                                                </button>
                                            }
                                        }
                                    }
                                </div>
                            </div>
                        }
                    </div>
                }
            </div>
        </MudPickerContent>
    </CascadingValue>;
}